<template>
	<view>
		<swiper @longpress="openBs()" :style="{height:winHeight}" :circular="true" class="swipers" @change="change"
			:current="current" :vertical="true" :indicator-dots="false" :autoplay="false" :interval="0" :duration="1">
			<swiper-item class="swipers-item" v-for="(item,index) in swiperList" :key="item.courseDetailsId">
				<view class="swipers-items column">
					<!-- 视频 -->
					<!-- #ifndef MP-TOUTIAO -->
					<!-- #ifdef MP-WEIXIN -->
					<!-- wxUrl -->
					<video :show-fullscreen-btn="false" @controlstoggle="controlstoggles"
						@click.stop.prevent="isSelectType" @timeupdate="timeupdate" @pause="pauseClick"
						@waiting="waiting()" :controls="false" object-fit="cover"
						v-if="current === index && item.videoUrl" :play-strategy="2" :show-loading="true"
						codec="software" :show-center-play-btn="true" :loop="false" @ended="ended"
						@play="videoPlay('myVideo'+item.courseDetailsId)" :enable-progress-gesture="false"
						:poster="item.titleImg" :ref="'myVideo'+item.courseDetailsId"
						:id="'myVideo'+item.courseDetailsId" :src="item.wxUrl" :autoplay="item.autoPlay"
						class="swipers-items-video u-flex-1"></video>
					<!-- #endif -->
					<!-- #ifndef MP-WEIXIN -->
					<video :show-fullscreen-btn="false" :show-play-btn="false" @click.stop.prevent="isSelectType"
						@pause="pauseClick" :controls="false" @controlstoggle="controlstoggles" @timeupdate="timeupdate"
						@waiting="waiting()" object-fit="cover" v-if="current === index && item.videoUrl"
						:play-strategy="2" :show-loading="true" codec="software" :show-center-play-btn="true"
						:loop="false" @ended="ended" @play="videoPlay('myVideo'+item.courseDetailsId)"
						:enable-progress-gesture="false" :poster="item.titleImg" :ref="'myVideo'+item.courseDetailsId"
						:id="'myVideo'+item.courseDetailsId" :src="item.videoUrl" :autoplay="item.autoPlay"
						class="swipers-items-video u-flex-1"></video>
					<!-- #endif -->
					<!-- #endif -->
					<!-- #ifdef MP-TOUTIAO -->
					<view class="swipers-items-video u-flex-1" v-if="current == index && item.videoUrl">
						<video-player style="width: 100%;height: 100%;" :show-fullscreen-btn="false"
							@controlstoggle="controlstoggles" @click.stop.prevent="isSelectType" @error="videoError"
							version="1" :controls="false" @getsource="getsource()" @ended="ended" object-fit="cover"
							@play="videoPlay('myVideo'+item.courseDetailsId)" :autoplay="item.autoPlay"
							:id="'myVideo'+item.courseDetailsId" :ref="'myVideo'+item.courseDetailsId"
							:album-id="dyCourseId" :episode-id="item.dyEpisodeId" :cloud-type="playType"
							:three-party-cloud="item.videoUrl" :poster="item.titleImg" :loop="false"></video-player>
					</view>

					<!-- #endif -->
					<!-- 没有视频权限则显示封面图 -->
					<image v-else @click="openShowPay();showControls = true" :src="item.titleImg"
						class="swipers-items-imgsbg" mode="aspectFill"></image>
					<!-- 返回图标 -->
					<!-- #ifndef MP-TOUTIAO -->
					<view @click.stop="goBack()" :style="{top:meunTop+'px'}"
						class="w-s-color-f u-flex swipers-items-back" v-if="showControls">
						<u-icon name="arrow-left" color="#ffffff" size="38"></u-icon>
						<text class="u-m-l-16">{{item.courseDetailsName}}</text>
					</view>
					<!-- #endif -->
					<!-- 暂停按钮 -->
					<view class="position-absolute top-50 left-50 play-view" :class="pauseShow ? 'active-play' : ''">
						<image @click.stop.prevent="isSelectType" class="play-img" src="../../static/images/index/3.png"
							mode=""></image>
					</view>
					<view class="swipers-items-info" v-if="showControls">
						<view class="u-m-b-16 u-flex">
							<u-image width="52rpx" height="68rpx" border-radius='10' :src="info.titleImg"></u-image>
							<view class="u-f-32 w-s-color-f u-m-l-16">{{title}}</view>
						</view>
						<!-- 简介 item.content-->
						<view class="swipers-items-info-content u-line-2" v-if="item.content" v-html="item.content">

						</view>
						<view class="position-relative progress-all" @touchstart="touchstart" @touchmove="touchmove"
							@touchend="touchend" @touchcancel="touchcancel">
							<view class="w-100 h-100 u-flex">
								<view class="progress-border">
									<view class="progress-active" :style="activeStyle"></view>
								</view>
							</view>
							<view class="progress-btn" :style="activeDotStyle"></view>
						</view>
					</view>
					<!-- 集数 -->
					<!-- 集数 openShow-->
					<view v-if="current === index" class="js-view u-flex u-row-between position-relative">
						<view class="swipers-items-info-num w-100 space-between  u-p-l-32 u-p-r-40 w-s-color-f"
							@click="openShowPay">
							<view class="u-f-28">观看完整短剧·全{{meunList.length}}集</view>
							<u-icon name="arrow-right" color="#fff" size="28"></u-icon>
						</view>
						<image @click.stop="jsClick(false)" v-if="showControls" src="../static/1.png" class="js-img"
							mode="">
						</image>
						<image @click.stop="jsClick(true)" v-else src="../static/2.png" class="js-img" mode=""></image>
					</view>
					<!-- 右侧操作  :style="[tabBarStyles]"-->
					<view class="swipers-items-right" v-if="showControls">
						<view class="swipers-items-right-item">
							<view class="swipers-items-right-item-img" @click.stop="dianzan(item)">
								<u-icon name="heart-fill" v-if="item.isGood!=0" color="#FA2D64" size="60"></u-icon>
								<u-icon name="heart-fill" v-else color="#ffffff" size="60"></u-icon>

							</view>
							<!-- <view class="swipers-items-right-item-txt">
								{{item.goodNum}}
							</view> -->
							<view style="color: white;" class="swipers-items-right-item-txt" v-if="item.goodNum<10000">
								<text class="swipers-items-right-item-txts">
									{{item.goodNum}}
								</text>
							</view>
							<view style="color: white;" class="swipers-items-right-item-txt" v-else>
								<text class="swipers-items-right-item-txts">
									{{(item.goodNum / 10000).toFixed(1)}}万
								</text>
							</view>
						</view>
						<view class="swipers-items-right-item" @click.stop="shoucang()">
							<view class="swipers-items-right-item-img">
								<image v-if="isCollect" src="../../static/images/me/shuqian_s.png" mode="">
								</image>
								<image v-else src="../../static/images/me/shuqian.png" mode=""></image>
							</view>
							<view class="swipers-items-right-item-txt">
								{{isCollect ? '已追' : '追剧'}}
							</view>
						</view>
						<!-- #ifndef MP-KUAISHOU -->
						<view class="swipers-items-right-item" @click="share(item)">
							<view class="swipers-items-right-item-img">

								<image src="../../static/images/me/share.png" mode=""></image>
							</view>
							<view class="swipers-items-right-item-txt">
								分享
							</view>
						</view>
						<!-- #endif -->
					</view>
				</view>
			</swiper-item>
		</swiper>
		<uni-popup ref="popupBs" :safe-area="true" background-color="#ffffff">
			<view class="bs">
				<text class="bs-title">倍速：</text>
				<view class="bs-se">
					<view class="bs-se-i" @click="BsChange(index)" :class="nowBs==index?'bsActive':''"
						v-for="(item,index) in subList" :key="index">
						{{item.name}}
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- #ifndef MP-KUAISHOU -->
		<u-popup :closeable="true" close-icon="close" close-icon-size="30" close-icon-color="#333333"
			:mask-custom-style="maskCustomStyle" v-model="show" border-radius="24" mode="bottom">
			<view class="list">

				<view class="list-title u-p-t-36 row align-start u-m-b-10">
					<u-image width="114rpx" height="114rpx" border-radius='12' :src="info.titleImg"></u-image>
					<view class="u-m-l-20">
						<view class="u-f-32 font-weight-550 u-m-b-12">{{title}}</view>
						<view class="w-s-color-9 u-f-28">共{{meunList.length}}集</view>
					</view>
				</view>
				<view class="list-box">
					<view class="space-between w-100 select-js">
						<view :class="episodeIndex==index ? 'js-active' : ''" v-for="(item,index) in episodeList"
							:key="index" @click="episodeClick(index)">{{item}}</view>
					</view>
					<scroll-view scroll-with-animation :scroll-into-view="scrollIntoViews" :show-scrollbar="true"
						scroll-y="true" :scroll-top="scrollTop" @scroll="scrollClick"
						style="width: 100%;height: 500rpx;padding-bottom: 30rpx;">
						<view class="list-box-wai flex justify-between flex-wrap">
							<view :id="item.viewInfo" :class="('video'+index) == scrollIntoView?'videoListCurr':''"
								class="list-box-item flex align-center justify-center" @click="selectPlay(item)"
								v-for="(item,index) in meunList" :key="index">
								{{index+1}}
								<image v-if="('video'+index) == scrollIntoView" class="list-box-item-playing"
									src="../../static/images/me/playIng.png" mode=""></image>
								<view v-if="!item.videoUrl"
									class="list-box-item-lock flex align-center justify-center w-100 h-100 position-absolute top-0 left-0 u-bdr-12">
									<image src="@/static/images/me/4.png" mode=""></image>
								</view>
							</view>
							<view class="no-item"></view>
							<view class="no-item"></view>
							<view class="no-item"></view>
							<view class="no-item"></view>
						</view>

					</scroll-view>
				</view>
			</view>
		</u-popup>
		<!-- #endif -->
		<!-- #ifdef MP-KUAISHOU -->
		<uv-popup @maskClick="maskClick" :closeable="true" ref="popupBsss" mode="bottom" custom-style="height: 800rpx;"
			:safe-area="false" bgColor="#202020">
			<view class="list">
				<view class="list-title flex align-center">
					{{title}}
					<text class="list-title-ji">共{{meunList.length}}集</text>
				</view>
				<view class="list-box">

					<scroll-view :scroll-into-view="scrollIntoViews" :show-scrollbar="true" scroll-y="true"
						style="width: 100%;height: 500rpx;padding-bottom: 30rpx;">
						<view class="list-box-wai flex justify-between flex-wrap">
							<view :id="item.viewInfo" :class="('video'+index) == scrollIntoView?'videoListCurr':''"
								class="list-box-item flex align-center justify-center" @click="selectPlay(item)"
								v-for="(item,index) in meunList" :key="index">
								{{index+1}}
								<image v-if="('video'+index) == scrollIntoView" class="list-box-item-playing"
									src="../../static/images/me/playIng.png" mode=""></image>
								<view v-if="!item.videoUrl"
									class="list-box-item-lock flex align-center justify-center w-100 h-100 position-absolute top-0 left-0">
									<!-- <u-icon name="lock" color="#ffffff" size="20"></u-icon> -->
									<image style="width: 18rpx;height: 22rpx;" src="../../static/images/me/lockWite.png"
										mode=""></image>
								</view>
							</view>
							<view class="no-item"></view>
							<view class="no-item"></view>
							<view class="no-item"></view>
						</view>

					</scroll-view>
				</view>
			</view>
		</uv-popup>
		<!-- #endif -->

		<!-- 购买视频 -->
		<u-popup :closeable="true" :custom-style="customStyle" :safe-area-inset-bottom="false" close-icon="close"
			close-icon-size="30" close-icon-color="#333333" :mask-custom-style="maskCustomStyle" v-model="showPay"
			border-radius="24" mode="bottom">
			<view class="list">
				<view class="list-title flex align-center">
					<!-- <u-icon name="lock" class="list-title-icon" color="#efbb6b" size="40"></u-icon> -->
					当前视频 没有播放权限
				</view>
				<view class="list-item" v-if="zhengbu === '是' && isWxIosPay == true">
					<view class="list-item-box flex align-center justify-center" @click="payVideo(1)">
						<image src="../../static/images/me/rmIcon.png" mode=""></image>
						{{zongPrice}}金豆解锁整部视频
					</view>
				</view>
				<view class="list-item" v-if="danbu === '是' && isWxIosPay == true">
					<view class="list-item-box" @click="payVideo(2)">
						{{countPrice}}金豆解锁单集视频
					</view>
				</view>
				<view class="list-item" v-if="isVips == '是' && isWxIosPay == true">
					<view class="list-item-box flex align-center justify-center" @click="goNav('/me/vip/index')">
						<image src="../../static/images/me/rmIcon.png" mode=""></image>
						开通会员
					</view>
				</view>
				<!-- #ifdef MP-WEIXIN -->
				<view class="list-item" v-if="isGuanggao == '是'&& adUnitId && advertising">
					<view class="list-item-box" @click="openVideoAd()">
						观看广告免费解锁本集
					</view>
				</view>
				<!-- #endif -->
				<!-- #ifdef MP-TOUTIAO -->
				<view class="list-item" v-if="isGuanggaody == '是'&& dyadUnitId && advertising">
					<view class="list-item-box" @click="openVideodyAd()">
						观看广告免费解锁本集
					</view>
				</view>
				<!-- #endif -->

			</view>
		</u-popup>
		<!-- 充值购买弹窗 -->
		<payPopus v-if="showMoney" :payPrice="payPrice" :show="showMoney" @closeMoney="closeMoney"
			@paySuccess="paySuccess" />

		<!-- #ifdef H5 -->
		<tki-qrcode ref="qrcode" v-if="isStart" :val="erweima" :size="200" background="#ffffff" foreground="#000"
			pdground="#000" :onval="true" :loadMake="true" @result="qrR" :show="false"></tki-qrcode>
		<!-- @success：成功事件  imgSrc：图片地址 QrSrc：二维码图片地址  
		Title：标题 PriceTxt：价格 OriginalTxt：原始价格 LineType -->
		<cc-poster v-if="haibaoShow==true && erweima" @error="posterError" @success="posterSuccess" :imgSrc="imgSrc"
			:QrSrc="qrCodeData" :Title="title" :PriceTxt="title" :LineType="false"></cc-poster>
		<!-- #endif -->
		<!-- #ifdef APP -->
		<tki-qrcode ref="qrcode" v-if="isStart" :val="erweima" :size="200" background="#ffffff" foreground="#000"
			pdground="#000" :onval="true" :loadMake="true" @result="qrR" :show="false"></tki-qrcode>
		<!-- @success：成功事件  imgSrc：图片地址 QrSrc：二维码图片地址  
		Title：标题 PriceTxt：价格 OriginalTxt：原始价格 LineType -->
		<cc-poster v-if="haibaoShow==true && erweima" @error="posterError" @success="posterSuccess" :imgSrc="imgSrc"
			:QrSrc="qrCodeData" :Title="title" :PriceTxt="title" :LineType="false"></cc-poster>
		<!-- #endif -->



		<!-- #ifdef MP-WEIXIN -->
		<!--  -->
		<cc-poster v-if="haibaoShow==true && qrCodeData" @error="posterError" @success="posterSuccess" :imgSrc="imgSrc"
			:QrSrc="qrCodeData" :Title="title" :PriceTxt="title" :LineType="false"></cc-poster>
		<!-- #endif -->
		<!-- #ifdef MP-TOUTIAO -->
		<cc-poster v-if="haibaoShow==true && qrCodeData" @error="posterError" @success="posterSuccess" :imgSrc="imgSrc"
			:QrSrc="qrCodeData" :Title="title" :PriceTxt="title" :LineType="false"></cc-poster>
		<!-- #endif -->
		<u-popup width="686" v-model="showImg" mode="center" border-radius="14">
			<image :show-menu-by-longpress='true' @click="priveImage(haibaoImg)" @longpress="saveImage()"
				:src="haibaoImg" style="width: 100%;" mode="widthFix"></image>
		</u-popup>
		<view class="zd-play">
			<u-popup width="550" :mask-close-able="false" v-model="showPlay" mode="center">
				<view class="zd-view direction">
					<u-image width="278rpx" height="336rpx" border-radius='20' :src="info.titleImg"></u-image>
					<view class="font-weight-550 u-f-36 w-s-color-f my-3">{{title}}</view>
					<view class="text-ellipsis w-s-color-f u-f-28 u-m-b-28">
						{{jjText}}
					</view>
					<view class="flex-center u-m-b-28 u-f-28">
						<view class="cx-btn w-s-color-f" @click="cxClick">重新播放</view>
						<view class="new-btn" @click="xyjClick">观看下一集</view>
					</view>
					<view class="flex-center u-f-24">
						<view class="djs-num">{{djsNum}}秒</view>
						<view class="w-s-color-f u-m-l-8">后自动跳转下一集</view>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	//导入地址
	import config from '../../common/config.js'
	import tkiQrcode from '../../components/tki-qrcode/tki-qrcode.vue';
	//倒入充值购买弹窗
	import payPopus from '../components/payPopus/payPopus.vue'
	// #ifdef MP-WEIXIN || MP-TOUTIAO
	var videoAd = null;
	// #endif
	let sysInfo = uni.getSystemInfoSync()
	let bl = (750 / sysInfo.windowWidth);
	export default {
		components: {
			tkiQrcode,
			payPopus
		},
		data() {
			return {
				payPrice: 0, //需要支付的价格
				showMoney: false, //是否显示充值弹窗
				showPay: false,
				dyCourseId: '',
				nowBs: 1, //当前倍速
				subList: [{
					name: '0.5x',
					num: 0.5
				}, {
					name: '1x',
					num: 1
				}, {
					name: '1.25x',
					num: 1.25
				}, {
					name: '1.5x',
					num: 1.5
				}],
				customStyle: {
					background: '#202020'
				},
				isStart: false, //是否开始生成二维码
				erweima: '',
				qrCodeData: '',
				haibaoImg: '',
				showImg: false,
				haibaoShow: false,
				title: '',
				imgSrc: '',
				current: 0,
				maskCustomStyle: {
					background: 'rgba(0, 0, 0, 0.5)'
				},
				show: false,
				videoList: [],
				videoContext: null, //记录当前视频的上下文
				isVIP: false, //是否是vip
				courseId: '',
				meunList: [], //菜单
				meunTop: 0, //返回图标距离顶部的距离
				num: 1, //当前播放的集数
				showPay: false, //购买视频的弹窗
				info: {}, //整部的信息
				courseDetailsId: '', //详情id
				scrollIntoView: '', //当前播放视频的位置
				scrollIntoViews: 'video0', //当前播放视频的位置
				isVips: '否', //是否显示会员
				adUnitId: '', //微信广告id
				dyadUnitId: '', //抖音广告id
				isGuanggao: '否',
				isGuanggaody: '否',
				winHeight: '100vh',
				zhengbu: '否',
				danbu: '否',
				playType: 1,
				showControls: true, //是否显示操作栏
				timerCon: null, //显示隐藏控制栏定时器
				tt_album_id: '', //抖音剧id
				tt_episode_id: '', //抖音级id
				qdCode: '', //渠道码
				ordersId: '', //订单id
				payMoney: '', //支付价格
				isCollect: false, //是否收藏
				zongPrice: 0, //整部价格
				countPrice: 0, //单集价格
				isWxIosPay: true,
				showPlay: false,
				jjText: "", //简介
				djsNum: 5,
				interVal: null,

				/* 进度条 */
				barWidth: 686, //进度条总宽度
				duration: 0, //视频总时间
				currentTime: 0, //视频当前事件
				activeWidth: 0, //当前进度
				moveStatus: false, // 移动状态
				pauseShow: false,
				playPosi: {
					top: '0rpx',
					left: '0rpx'
				},
				barLeft: 0,
				episodeList: [],
				episodeIndex: 0,
				scrollTop: 0
			};
		},
		onShareAppMessage(res) {
			return {
				path: '/me/detail/detail?invitation=' + this.invitationCode + '&qdCode=' + this
					.qdCode + '&id=' + this.courseId + '&courseDetailsId=' + this.videoList[this.current].courseDetailsId +
					'&tt_album_id=' + this
					.tt_album_id + '&tt_episode_id=' + this.videoList[this.current]
					.dyEpisodeId, //这是为了传参   onload(data){let id=data.id;} 
				title: this.getVideoTitle(),
				imageUrl: this.getVideoImageUrl()
			}
		},
		onShareTimeline(res) {
			return {
				path: '/me/detail/detail?invitation=' + this.invitationCode + '&qdCode=' + this
					.qdCode + '&id=' + this.courseId + '&courseDetailsId=' + this.videoList[this.current].courseDetailsId +
					'&tt_album_id=' + this
					.tt_album_id + '&tt_episode_id=' + this.videoList[this.current]
					.dyEpisodeId, //这是为了传参   onload(data){let id=data.id;} 
				title: this.getVideoTitle(),
				imageUrl: this.getVideoImageUrl()
			}
		},
		computed: {
			//当前视频是否可以看广告解锁
			advertising() {

				return this.videoList[this.current] ? this.videoList[this.current].advertising == 1 : false
			},
			// 视频列表
			swiperList() {
				return this.videoList
			},
			// 移动视频信息的样式
			tabBarStyle() {
				let style = {
					// 滑块在页面渲染后第一次滑动时，无需动画效果
					'transition-duration': `${1}s`,
				};
				if (this.showControls) { //显示控制栏的时候
					style.transform = `translate(${20}rpx, 0)`
				} else {
					style.transform = `translate(${-750}rpx, 0)`
				}
				return style;
			},
			// 移动视频右侧按钮的样式
			tabBarStyles() {
				let style = {
					// 滑块在页面渲染后第一次滑动时，无需动画效果
					'transition-duration': `${1}s`,
				};
				if (this.showControls) { //显示控制栏的时候
					style.transform = `translate(${-20}rpx, 0)`
				} else {
					style.transform = `translate(${750}rpx, 0)`
				}
				return style;
			},
			// 计算当前进度的宽度
			activeStyle() {
				return `width:${this.activeWidth}rpx`
			},
			// 计算当前进度圆点的left偏移量
			activeDotStyle() {
				return `left:${this.activeWidth}rpx`
			},
			// 计算当前的秒数
			newTime() {
				return this.barWidth === 0 ? 0 : (this.activeWidth / this.barWidth) * this.duration
			}
		},
		created() {
			// #ifdef MP-KUAISHOU || MP-WEIXIN
			this.winHeight = '100vh'
			// #endif
		},
		onLoad(e) {
			console.log('参数', e)
			//在苹果系统微信小程序是否开启支付
			this.isWxIosPay = uni.getStorageSync('isWxIosPay')
			//是开启整部购买
			this.zhengbu = uni.getStorageSync('zhengbu') ? uni.getStorageSync('zhengbu') : '否'
			//是否开启单集购买
			this.danbu = uni.getStorageSync('danbu') ? uni.getStorageSync('danbu') : '否'
			// #ifndef MP-WEIXIN || MP-KUAISHOU
			if (this.showControls = true) {
				clearTimeout(this.timerCon)
				this.timerCon = null
				this.timerCon = setTimeout(() => {
					this.showControls = false
					this.$forceUpdate()
				}, 4000)
			}
			// #endif
			if (uni.getStorageSync('qdCode')) {
				this.qdCode = uni.getStorageSync('qdCode')
			} else {
				this.qdCode = ""
			}

			// #ifdef MP-WEIXIN || MP-TOUTIAO
			if (e.scene) { //这里为线上操作
				//此处的二维码  page/index/index?brokerId=123
				let scene = decodeURIComponent(e.scene);
				scene = scene.split(',')
				uni.setStorageSync('invitation', scene[0])
				this.courseId = scene[1]
				this.courseDetailsId = scene[2]
				if (scene[3]) {
					uni.setStorageSync('qdCodeion', scene[3])
				}
				if (scene[4]) {
					this.tt_album_id = scene[4]
				}
				if (scene[5]) {
					this.tt_episode_id = scene[5]
				}
				this.getDataList(this.courseId, this.courseDetailsId);
				this.getMyLoveStatus()
			}
			this.isGuanggao = uni.getStorageSync('isGuanggao') //微信
			this.isGuanggaody = uni.getStorageSync('isGuanggaody') //抖音
			this.adUnitId = uni.getStorageSync('adUnitId')
			// #ifdef MP-WEIXIN
			if (this.isGuanggao == '是' && this.adUnitId) {
				/* this.adLoad() */
			}
			// #endif
			// #ifdef MP-TOUTIAO
			this.dyadUnitId = uni.getStorageSync('dyadUnitId');
			if (this.isGuanggaody == '是' && this.dyadUnitId) {
				console.log('触发了')
				/* this.adDouYinLoad() //抖音广告 */
			}
			// #endif

			// #endif
			if (e.invitation) {
				uni.setStorageSync('invitation', e.invitation)
			}
			if (e.qdCode) {
				uni.setStorageSync('qdCodeion', e.qdCode)
			}
			if (e.id) {
				this.courseId = e.id
				if (e.courseDetailsId && e.courseDetailsId != 'null') {
					this.courseDetailsId = e.courseDetailsId
				}
				console.log(this.courseDetailsId, '跳转进来的id')
				this.getDataList(this.courseId, this.courseDetailsId);
				this.getMyLoveStatus()
			}
			if (e.tt_album_id) {
				this.tt_album_id = e.tt_album_id
			}
			if (e.tt_episode_id) {
				this.tt_episode_id = e.tt_episode_id
			}

			// this.$u.get('/app/common/type/817').then(res => { //是否开启购买整部视频	817
			// 	if (res.code == 0 && res.data) {
			// 		this.zhengbu = res.data.value;
			// 	}
			// });

			// this.$u.get('/app/common/type/818').then(res => { //是否开启购买单集视频	818
			// 	if (res.code == 0 && res.data) {
			// 		this.danbu = res.data.value;
			// 	}
			// });
		},
		onHide() {
			//恢复录屏
			// #ifdef MP-TOUTIAO
			tt.enableUserScreenRecord({
				success(res) {
					console.log("enableUserScreenRecord 调用成功", res);
				},
				fail(res) {
					console.log("enableUserScreenRecord 调用失败", res);
				},
			});
			// #endif
			if (this.interVal) {
				clearInterval(this.interVal)
			}
		},
		onUnload() {
			// #ifdef MP-TOUTIAO
			tt.enableUserScreenRecord({
				success(res) {
					console.log("enableUserScreenRecord 调用成功", res);
				},
				fail(res) {
					console.log("enableUserScreenRecord 调用失败", res);
				},
			});
			// #endif
			if (this.interVal) {
				clearInterval(this.interVal)
			}
		},
		onShow() {
			let that = this
			//增加防录屏
			// 抖音
			// #ifdef MP-TOUTIAO
			tt.disableUserScreenRecord({
				success(res) {
					console.log("disableUserScreenRecord 调用成功", res);
				},
				fail(res) {
					console.log("disableUserScreenRecord 调用失败", res);
				},
			});
			// #endif
			//微信
			// #ifdef MP-WEIXIN
			// 监听用户录屏事件

			if (sysInfo.osName == 'ios') { //ios系统
				const handler = function(res) {
					console.log(res.state)
					if (res.state == 'start') {
						if (that.videoContext) { //如果有视频的上下文对象
							that.videoContext.stop() //停止视频播放
						} else {
							let numIdCurr = that.videoList[that.current].courseDetailsId
							that.videoContextId = 'myVideo' + numIdCurr
							that.videoContext = uni.createVideoContext(that.videoContextId, that)
							console.log(that.videoContext)
							that.videoContext.stop() //停止视频播放
						}
						uni.showModal({
							title: '提示',
							content: '尊重他人劳动成功，请勿录屏！',
							complete() {
								uni.switchTab({
									url: '/pages/index/index'
								})
							}
						})
					}
				}
				wx.onScreenRecordingStateChanged(handler)
			} else { //安卓系统
				wx.setVisualEffectOnCapture({
					visualEffect: 'hidden',
					success(res) {}
				})
			}
			// #endif
			try {
				this.playType = Number(uni.getStorageSync('playType'))
			} catch (e) {
				//TODO handle the exception
				this.playType = 1
			}
			this.isVips = uni.getStorageSync('isVips') ? uni.getStorageSync('isVips') : '否'

			// uni.$on('back', (data) => {
			// 	if (data.flag == true) {
			// 		that.showPay = false
			// 		that.getDataList(that.courseId, that.courseDetailsId, true);
			// 	}
			// })
		},
		onReady() {
			// #ifdef MP-WEIXIN || MP-KUAISHOU
			let info = uni.getMenuButtonBoundingClientRect()
			this.meunTop = info.top + ((info.height - 19) / 2)
			console.log(this.meunTop, '测试ccccc')
			// #endif
			// #ifndef MP-WEIXIN || MP-KUAISHOU
			this.meunTop = 37
			// #endif
		},
		watch: {
			//监听当前播放的集数
			current() {
				this.comNumVideo()
			},
			showControls(val) {
				//在没有播放视频权限的时候控制中心不隐藏
				if (!this.videoList[this.current].videoUrl) {
					this.showControls = true
					this.$forceUpdate()
				}
				// #ifndef MP-WEIXIN || MP-KUAISHOU || H5
				if (this.showControls == true) {
					clearTimeout(this.timerCon)
					this.timerCon = null
					this.$nextTick(() => {
						this.timerCon = setTimeout(() => {
							this.showControls = false
							this.$forceUpdate()
						}, 5000)
					})

				}
				// #endif
				// #ifdef H5
				let el = document.querySelector('.uni-video-bar');
				el.style = 'display:none !important;';
				// #endif
			},
			// 监听当前时间的变化
			currentTime(newValue, oldValue) {
				if (!this.moveStatus) {
					this.active()
				}
			}
		},
		methods: {
			episodeClick(index) {
				if (this.episodeIndex == index) return
				this.episodeIndex = index
				/* let bl = (750 / sysInfo.windowWidth); */
				this.scrollTop = index * 432 / bl

			},
			scrollClick(e) {
				this.episodeIndex = Math.round(e.detail.scrollTop * bl / 432)
			},



			timeupdate(e) {
				// 当前时间
				this.currentTime = parseInt(e.detail.currentTime)
				// 总时长
				this.duration = parseInt(e.detail.duration)
				// #ifdef H5
				uni.hideLoading()
				// #endif
			},
			// 计算当前进度条的宽度
			active() {
				this.activeWidth = this.duration === 0 ? 0 : (this.currentTime / this.duration) * this.barWidth
			},
			// 触摸开始事件
			touchstart(e) {
				// 当总时长为0的时候终止触摸
				if (this.duration === 0) return
				// x轴坐标
				this.moveStatus = true
				this.activeWidth = e.changedTouches[0].clientX * bl
			},
			// 触摸移动事件
			touchmove(e) {
				if (this.duration === 0) return
				let d = e.changedTouches[0].clientX * bl
				if (d <= 0) {
					this.activeWidth = 0
				} else if (d >= this.barWidth) {
					this.activeWidth = this.barWidth
				} else {
					this.activeWidth = d
				}
				// 当处于手指滑动的时候暂停播放器
				this.videoContext.pause()
				this.currentTime = this.newTime
			},
			// 触摸结束事件
			touchend(e) {
				if (this.duration === 0) return
				this.moveStatus = false
				this.videoContext.seek(this.newTime)
				this.videoContext.play()
			},
			// 触摸中断事件
			touchcancel(e) {
				this.touchend(e)
			},
			jsClick(show) {
				this.showControls = show
			},
			jzClick() {
				uni.setStorageSync('bannerImg', this.info.bannerImg)
				uni.navigateTo({
					url: "/me/detail/photo"
				})
			},
			//点击封面打开弹窗
			openShowPay() {
				this.zongPrice = this.info.price
				this.countPrice = this.videoList[this.current].price
				this.show = true
			},
			// 获取收藏状态
			getMyLoveStatus() {
				let data = {
					id: this.courseId,
					token: uni.getStorageSync('token')
				}
				this.$Request.getT('/app/course/selectCourseDetailsById', data).then(res => {

					if (res.code == 0) {
						this.jjText = res.data.details
						if (res.data && res.data.isCollect && res.data.isCollect > 0) {
							this.isCollect = true
						} else {
							this.isCollect = false
						}
					}
				})
			},
			maskClick() {
				this.$refs.popupBsss.close()
				this.scrollIntoViews = ''
			},
			priveImage(url) {
				// #ifdef H5
				let ua = navigator.userAgent.toLowerCase();
				if (ua.indexOf('micromessenger') == -1) {
					uni.previewImage({
						urls: [url]
					})
				}
				// #endif
			},
			//抖音保存海报
			saveImage() {
				let that = this
				// #ifdef MP-TOUTIAO || MP-KUAISHOU
				uni.saveImageToPhotosAlbum({
					filePath: that.haibaoImg,
					success: function() {
						uni.showToast({
							title: '已保存'
						})
					},
					fail() {
						uni.showToast({
							title: '保存失败，请重试',
							icon: 'none'
						})
					}
				});
				// #endif
			},
			//获取当前播放视频的封面图
			getVideoImageUrl() {
				return this.videoList[this.current].titleImg
			},
			//获取当前播放视频的标题
			getVideoTitle() {
				return this.videoList[this.current].courseDetailsName
			},
			/* 暂停 */
			pauseClick() {
				this.pauseShow = true
			},
			isSelectType(e) {
				this.pauseShow == false ? this.videoContext.pause() : this.videoContext.play()
				// console.log(e)
				/* // #ifndef MP-WEIXIN
				this.showControls = !this.showControls
				this.$forceUpdate()
				// #endif */

			},
			//显示/隐藏适配控制器的回调
			controlstoggles(e) {
				/* // #ifdef MP-WEIXIN || MP-TOUTIAO || MP-KUAISHOU
				this.showControls = e.detail.show
				// #endif

				console.log(e.detail.show, '显示/隐藏控制栏') */
			},
			videoError(e) {
				console.log(e, '错误')
			},
			getsource(e) {
				console.log(e, '获取资源完成')
				this.startPlays()
			},
			//开始播放
			startPlays() {
				this.$nextTick(() => {
					// 把选择的视频的自动播放设置为true
					// this.videoList[this.current].autoPlay = true
					//让当前选择的视频播放
					this.startPlay(this.current)
					//更新视图
					this.$forceUpdate()
				})
			},
			//打开倍速弹框
			openBs() {
				this.$refs.popupBs.open('bottom')
			},
			//切换倍速
			BsChange(index) {
				this.nowBs = index
				this.videoContext.playbackRate(this.subList[index].num)
				this.$refs.popupBs.close()
				uni.showToast({
					title: '已切换' + this.subList[index].num + '倍播放',
					icon: 'none',
					duration: 2000
				})
			},
			//获取
			adLoad() {
				let that = this
				if (uni.createRewardedVideoAd) {
					videoAd = uni.createRewardedVideoAd({
						adUnitId: that.adUnitId //你的广告key,从微信小程序后台>流量主>广告管理获取
					});
					videoAd.onError(err => {
						console.log(err);
					});
					videoAd.onClose((status) => {
						if (status && status.isEnded || status === undefined) {
							//广告播放完成后的的业务逻辑
							uni.showToast({
								title: '加载中'
							})
							let data = {
								courseId: that.videoList[this.current].courseId,
								courseDetailsId: that.videoList[this.current].courseDetailsId
							}
							that.$Request.postT("/app/course/courseNotify", data).then(res => {
								uni.hideLoading();
								if (res.code == 0) {
									uni.showToast({
										title: '解锁成功',
										icon: 'none',
										duration: 2000
									})
									that.showPay = false
									that.getDataList(that.courseId, that.courseDetailsId, true);
								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none',
										duration: 2000
									})
								}
							});
						} else {
							//广告播放失败或者未播放完成
							console.log('播放失败或者未播放完成')
							uni.showToast({
								title: '未完整观看视频不能获取奖励哦',
								icon: 'none'
							})
						}
					});
				}
			},

			//获取抖音
			adDouYinLoad() {
				let that = this
				if (uni.createRewardedVideoAd) {
					videoAd = uni.createRewardedVideoAd({
						adUnitId: that.dyadUnitId //你的广告key,从微信小程序后台>流量主>广告管理获取
					});
					videoAd.onError(err => {
						console.log(err);
					});
					videoAd.onClose((status) => {
						if (status && status.isEnded || status === undefined) {
							//广告播放完成后的的业务逻辑
							uni.showToast({
								title: '加载中'
							})
							let data = {
								courseId: that.videoList[this.current].courseId,
								courseDetailsId: that.videoList[this.current].courseDetailsId
							}
							that.$Request.postT("/app/course/courseNotify", data).then(res => {
								uni.hideLoading();
								if (res.code == 0) {
									uni.showToast({
										title: '解锁成功',
										icon: 'none',
										duration: 2000
									})
									that.showPay = false
									that.getDataList(that.courseId, that.courseDetailsId, true);
								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none',
										duration: 2000
									})
								}
							});
						} else {
							//广告播放失败或者未播放完成
							console.log('播放失败或者未播放完成')
							uni.showToast({
								title: '未完整观看视频不能获取奖励哦',
								icon: 'none'
							})
						}
					});
				}
			},

			//微信拉取广告
			openVideoAd() {
				let that = this
				console.log(videoAd, 222222222)
				if (videoAd) {
					videoAd.show().catch(err => {
						console.log(' 广告拉取失败，重试')
						// 广告拉取失败，重试
						videoAd.load().then(() => {
							videoAd.show();
						});
					})
				}
			},

			//抖音获取广告
			openVideodyAd() {
				let that = this

				let token = this.$queue.getData('token');
				if (!token) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return;
				}

				console.log(videoAd, 333333333)
				if (videoAd) {
					videoAd.show().catch(err => {
						console.log(' 广告拉取失败，重试')
						// 广告拉取失败，重试
						videoAd.load().then(() => {
							videoAd.show();
						});
					})
				}
			},
			//缓冲中
			waiting(e) {
				//在h5状态下视频出现缓冲则显示loding
				// #ifdef H5
				uni.showLoading()
				// #endif
			},
			openShow() {
				// #ifdef MP-KUAISHOU
				this.$refs.popupBsss.open()
				this.$nextTick(() => {
					this.scrollIntoViews = this.scrollIntoView
					this.$forceUpdate()
				})
				// #endif
				// #ifndef MP-KUAISHOU
				this.show = true
				this.$nextTick(() => {
					this.scrollIntoViews = this.scrollIntoView
					this.$forceUpdate()
				})
				// #endif

			},
			/**
			 * @param {String} path //返回的二维码地址
			 */
			qrR(path) {
				this.qrCodeData = path
				this.haibaoShow = true

			},
			//生成失败
			posterError() {
				this.haibaoImg = ''
				this.showImg = false
				// 生成完成后初始化分享
				this.haibaoShow = false
				this.isStart = false
				this.imgSrc = ''
				uni.showToast({
					title: '海报生成失败',
					mask: false,
					duration: 2000,
					icon: "none"
				});
			},
			/**生成成功
			 * @param {String} img 成功回调的图片
			 */
			posterSuccess(img) {
				this.haibaoImg = img.tempFilePath
				this.showImg = true
				// 生成完成后初始化分享
				this.haibaoShow = false
				this.isStart = false
				this.imgSrc = ''
				uni.hideLoading()
				uni.showToast({
					title: '长按图片保存海报',
					mask: false,
					duration: 2000,
					icon: "none"
				});
			},
			//分享
			share(item) {
				this.imgSrc = item.titleImg

				// #ifdef H5 || APP
				let urls = config.APIHOST2 + '/me/detail/detail?id=' + item.courseId + '&courseDetailsId=' + item
					.courseDetailsId + '&invitation=' + uni.getStorageSync('invitationCode') + '&qdCode=' + this.qdCode
				this.erweima = urls
				this.isStart = true
				// #endif

				let that = this
				// #ifdef MP-WEIXIN
				// invitationCode: uni.getStorageSync('invitationCode') + ',' + item.courseId + ',' + item
				// 	.courseDetailsId + ',' + this.qdCode + ',' + this.tt_album_id + ',' + this.tt_episode_id,
				let data = {
					invitationCode: uni.getStorageSync('invitationCode') + ',' + item.courseId + ',' + item
						.courseDetailsId + ',' + this.qdCode,
					page: 'me/detail/detail'
				}
				uni.downloadFile({
					url: config.APIHOST + '/app/invite/mpCreateQr?invitationCode=' + data.invitationCode +
						'&page=' + data.page,
					success(res) {
						if (res.statusCode === 200) {
							that.qrCodeData = res.tempFilePath
							that.haibaoShow = true
						} else {
							uni.hideLoading()
							uni.showToast({
								title: '分享失败',
								icon: 'none'
							})
						}
					}
				})
				// #endif
				// #ifdef MP-TOUTIAO
				let data = {
					invitationCode: uni.getStorageSync('invitationCode') + ',' + item.courseId + ',' + item
						.courseDetailsId + ',' + this.qdCode + ',' + this.tt_album_id + ',' + this.tt_episode_id,
					page: 'me/detail/detail'
				}
				uni.downloadFile({
					url: config.APIHOST + '/app/invite/dyCreateQr?invitationCode=' + data.invitationCode +
						'&page=' + data.page,
					success(res) {
						if (res.statusCode === 200) {
							that.qrCodeData = res.tempFilePath
							that.haibaoShow = true
						} else {
							uni.hideLoading()
							uni.showToast({
								title: '分享失败',
								icon: 'none'
							})
						}
					}
				})
				// #endif
			},
			/**
			 * @param {Object} type 类型 
			 * 1:购买整部视频
			 * 2:购买单集视频
			 */
			payVideo(type) {
				if (uni.getStorageSync('token')) {
					this.submitPay(type)
				} else {
					uni.navigateTo({
						url: "/pages/login/login"
					})
				}

			},
			//子组件支付成功的回调
			paySuccess() {
				this.payOrder(this.ordersId, this.payMoney)
			},
			//自组件关闭的回调
			closeMoney(data) {
				this.showMoney = data
			},
			//使用金豆购买
			submitPay(type) {
				let data = {
					courseId: this.courseId
				}
				if (type != 1) { //购买单集
					data.courseDetailsId = this.videoList[this.current].courseDetailsId
				}
				this.$Request.getT('/app/order/insertCourseOrders', data).then(res => {
					if (res.code == 0) {
						this.ordersId = res.data.orders.ordersId //记录订单id
						this.payMoney = res.data.orders.payMoney //记录订单价格

						this.payOrder(res.data.orders.ordersId, res.data.orders.payMoney)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			payOrder(orderId, payMoney) {
				let that = this
				that.$Request.postT("/app/order/payOrders", {
					orderId: orderId,
				}).then(res => {
					if (res.code == 0) {
						uni.hideLoading()
						uni.showToast({
							title: '已解锁，支付' + payMoney + '金豆',
							icon: 'none'
						})
						that.showPay = false
						that.showMoney = false
						setTimeout(() => {
							that.getDataList(that.courseId, that.videoList[that.current].courseDetailsId,
								true);
						}, 1000)

					} else { //支付失败（余额不足）
						that.showPay = false //关闭购买选择弹窗
						this.payPrice = payMoney //需要支付的价格
						this.showMoney = true //显示充值弹窗
					}
				});
			},
			//去开通会员
			goNav(url) {
				if (uni.getStorageSync('token')) {
					uni.navigateTo({
						url: url
					})
				} else {
					uni.navigateTo({
						url: "/pages/login/login"
					})
				}

			},
			//收藏
			shoucang() {
				if (uni.getStorageSync('token')) {
					let data = {
						courseId: this.courseId,
						classify: 1,
						type: this.isCollect == false ? 1 : 0
					}
					this.$Request.postJson('/app/courseCollect/insertCourseCollect', data).then(res => {
						if (res.code == 0) {
							this.getMyLoveStatus()
						}
					})
				} else {
					uni.navigateTo({
						url: "/pages/login/login"
					})
				}

			},
			//点赞
			dianzan(item) {
				if (uni.getStorageSync('token')) {
					let data = {
						courseId: item.courseId,
						courseDetailsId: item.courseDetailsId,
						classify: 2,
						type: item.isGood == 0 ? 1 : 0
					}
					this.$Request.postJson('/app/courseCollect/insertCourseCollect', data).then(res => {
						if (res.code == 0) {
							if (data.type == 1) {
								item.isGood = 1
								item.goodNum += 1
							} else {
								item.isGood = 0
								item.goodNum -= 1
							}
						}
					})
				} else {
					uni.navigateTo({
						url: "/pages/login/login"
					})
				}

			},
			//计算正在观看哪个视频
			comNumVideo() {
				let courseDetailsId = this.videoList[this.current].courseDetailsId
				this.meunList.map((item, index) => {
					if (item.courseDetailsId == courseDetailsId) { //找到了
						this.num = item.num
					}
				})
			},
			//选择集数后在更新剩下的数据
			setVideoList(index) {
				//判断后续是否还有两条视频
				let lengths = this.meunList.length - (index + 1)
				//有最少两条
				if (lengths >= 2) {
					//直接拿两条赋值进去
					this.videoList = [...this.videoList, ...this.meunList.slice(index + 1,
						index + 3)]
				}
				//只剩一条数据
				if (lengths == 1) {
					//把剩下的一条给放进去
					this.videoList = [
						//选中的那条
						...this.videoList,
						//身下的一条
						this.meunList[this.meunList.length - 1],
						//最后一条则放总数组的第一条
						this.meunList[0]
					]
				}
				//选择的就是最后一条数据
				if (lengths == 0) {
					//后两条拿总数组的前两条就可以了
					this.videoList = [...this.videoList, ...this.meunList.slice(0, 2)]
				}
				//更新视图
				this.$forceUpdate()
			},
			//选择播放
			selectPlay(item) {
				// 根据选择的courseDetailsId拿到meunList列表中的相同数据的下标
				const index = this.meunList.findIndex(menu => menu.courseDetailsId === item.courseDetailsId);
				this.videoList = [this.meunList[index]]
				this.current = 0
				//重新计算一下当前观看的是哪个视频
				this.comNumVideo()
				this.setWxUrl()
				// 把选择的视频的自动播放设置为true
				this.videoList[this.current].autoPlay = true
				//让当前选择的视频播放
				this.startPlay(this.current)
				//更新视图
				this.$forceUpdate()
				//关闭选择弹窗
				// #ifdef MP-KUAISHOU
				this.$refs.popupBsss.close()
				this.scrollIntoViews = ''
				// #endif
				// #ifndef MP-KUAISHOU
				this.show = false
				// #endif

				//记录当前播放位置
				this.scrollIntoView = 'video' + index
				//插入历史记录
				this.setHistor(this.videoList[this.current].courseId, this.videoList[this.current]
					.courseDetailsId)

				//等视图跟新完了，把之前剩下的数据补进去在$nextTick中处理
				this.$nextTick(() => {
					this.setVideoList(index)
				})

			},
			// 资源详情
			getDataList(id, courseDetailsId, type) {
				let data = {
					id,
					token: uni.getStorageSync('token') ? uni.getStorageSync('token') : ''
				}
				// #ifdef MP-WEIXIN
				data.courseDetailsId = courseDetailsId
				// #endif
				this.$u.api.selectCourseDetailsById(data).then(res => {
					if (res.code == 0) {
						if (res.data && res.data.dyCourseId) {
							this.dyCourseId = "" + res.data.dyCourseId;
						}
						if (res.data.listsDetail) {
							this.info = res.data
							this.title = this.info.title
							let arr = res.data.listsDetail
							arr.map((item, index) => {
								item.num = index + 1
								// #ifdef MP-TOUTIAO
								item.autoPlay = false
								// #endif
								// #ifndef MP-TOUTIAO
								if (item.videoUrl) {
									item.autoPlay = true
								} else {
									item.autoPlay = false
								}
								// #endif

								item.viewInfo = 'video' + index
							})
							//菜单数组
							this.meunList = arr


							let b = [];

							// 计算分段的数量  
							let segmentSize = 15;
							let totalSegments = Math.ceil(arr.length / segmentSize);

							// 遍历分段  
							for (let i = 0; i < totalSegments; i++) {
								// 计算当前分段的起始和结束索引  
								let start = i * segmentSize + 1;
								let end = Math.min((i + 1) * segmentSize, arr.length);

								// 添加分段标题到数组b  
								b.push(`${start}~${end}集`);
							}
							this.episodeList = b

							if (type == true) { //购买视频后返回的
								let courseDetailsId = this.videoList[this.current].courseDetailsId
								this.meunList.some((item) => {
									if (item.courseDetailsId === courseDetailsId) {
										this.videoList[this.current].videoUrl = item.videoUrl
										//自动播放
										this.startPlay(this.current)
										this.setWxUrl()
										return true
									}
								})
								this.videoList.map(item => {
									this.meunList.map(ite => {
										if (item.courseDetailsId == ite.courseDetailsId && item
											.courseDetailsId != courseDetailsId) {
											item.videoUrl = ite.videoUrl
										}
									})
								})
							} else { //直接跳转进来的

								let indexs = -1
								if (courseDetailsId) { //从记录进来的
									this.meunList.map((item, index) => {
										if (item.courseDetailsId == courseDetailsId) {
											indexs = index
										}
									})

									if (indexs != -1) { //找到了
										/* 计算当前处于那个位置 */
										this.episodeIndex = Math.floor((indexs + 1) / 15)


										if (Number(indexs + 1) === this.meunList.length) { //最后一条
											if (this.meunList.length == 1) { //只有一条
												this.videoList = this.meunList.slice(0,
													3)
											} else if (this.meunList.length == 2) {
												this.videoList = this.meunList.slice(0,
													3)
											} else {
												this.videoList = [
													this.meunList[this.meunList
														.length - 1],
													this.meunList[0],
													this.meunList[1],
												]
											}

										} else if (Number(indexs) === Number(this.meunList.length - 1)) { //倒数第二条
											if (this.meunList.length == 1) { //只有一条
												this.videoList = this.meunList.slice(0,
													3)
											} else if (this.meunList.length == 2) { //有两条的时候
												this.videoList = [
													this.meunList[1],
													this.meunList[0],
												]
											} else {
												this.videoList = [
													this.meunList[this.meunList
														.length - 2],
													this.meunList[this.meunList
														.length - 1],
													this.meunList[0],
												]
											}

										} else {
											//如果不是最后一条，也不是倒数第二条，则从找到的位置开始往后拿三条数据放入数组
											this.videoList = this.meunList.slice(indexs,
												indexs + 3)
										}
									} else {
										//没找到直接拿前三条数据即可
										this.videoList = this.meunList.slice(0, 3)
									}
								} else { //新的视频
									// //视频数组//直接拿前三条

									this.videoList = this.meunList.slice(0, 3)
									indexs = 0

								}
								//重新计算当前在播放哪个视频
								this.comNumVideo()
								if (indexs != -1 && this.meunList.length > 0) {
									this.$nextTick(() => {
										this.scrollIntoView = 'video' + indexs
									})

								}
							}
							let numIdCurr = this.videoList[0].courseDetailsId
							this.videoContextId = 'myVideo' + numIdCurr
							this.$forceUpdate()
							//插入历史记录
							this.setHistor(this.videoList[this.current].courseId, this.videoList[this.current]
								.courseDetailsId)
							this.$nextTick(() => {
								this.videoContext = uni.createVideoContext(this.videoContextId, this);
								this.setWxUrl()
								if (!this.videoList[this.current].videoUrl) { //不能播放的显示购买弹窗
									this.zongPrice = this.info.price
									this.countPrice = this.videoList[this.current].price
									this.showPay = true
								}
							})


						}
					} else {
						uni.showToast({
							title: res.msg,
							duration: 1500,
							icon: 'none'
						});
					}

				})
			},
			setWxUrl() {
				// #ifdef MP-WEIXIN
				if (!this.videoList[this.current].wxUrl) {
					let data = {
						wxCourseDetailsIds: this.videoList[this.current].wxCourseDetailsId
					}
					this.$Request.postJson('/app/course/selectWxVideoUrl', data).then(res => {
						if (res.code == 0 && res.data) {
							this.videoList[this.current].wxUrl = res.data[0].mp4_url
						}
					})
				}
				// #endif

			},
			setHistor(courseId, courseDetailsId) {
				if (uni.getStorageSync('token')) {
					let data = {
						courseId: courseId,
						courseDetailsId: courseDetailsId,
						classify: 3,
						type: 1
					}
					this.$Request.postJson('/app/courseCollect/insertCourseCollect', data).then(res => {})
				}

			},
			//swiper上下切换事件
			change(e) {
				//拿出当前的swiper索引
				let current = Number(e.detail.current)
				// 根据courseDetailsId在meunList中找到这个数据的下标
				let indexs = -1;
				// 有三条的时候
				if (current == 2 && this.current == 0) {
					//向上滑到头的时候先拿第一条数据的courseDetailsId
					let courseDetailsId = this.videoList[0].courseDetailsId
					indexs = this.meunList.findIndex(item => item.courseDetailsId === courseDetailsId);
					if (indexs != -1) { //找到了，indexs就是对应下标
						//先判断meunList数组剩下的元素是否够三条
						const lengths = (this.meunList.slice(0, indexs)).length
						if (lengths >= 3) { //够三条
							// 因为轮播图开启了首尾衔接,所以在滑动到尾部重新进入第一页之前替换全部数据为之前的三条
							//因为slice(str,end)，包含str，不包含end，所以拿三条数据则-3
							this.videoList = this.meunList.slice(indexs - 3, indexs)
						} else { //不够三条
							let arr = new Array(3)
							switch (lengths) {
								//只有一条
								case 1:
									//只有一条的时候需要给数组补两条凑够三条，把meunList数组的前两条拿出来补在后面
									arr[2] = this.meunList[indexs - 1] //把剩下的一条取出来放到要滑动的那一页
									//因为剩下的数据不够了，则拿meunList末尾的两条数据补齐
									//第二个用最后一条数据
									arr[1] = this.meunList[this.meunList.length - 1]
									//第一个用倒数第二条数据
									arr[0] = this.meunList[this.meunList.length - 2]
									//赋值
									this.videoList = arr
									break;
									//只有二条
								case 2:
									//还剩下两条数据的时候
									//把剩下的倒数第一条取出来放到要滑动的那一页
									arr[2] = this.meunList[indexs - 1]
									//把剩下的最后一条放到第二个元素
									arr[1] = this.meunList[indexs - 2]
									//最后一个元素则由meunList的最后一条补齐
									arr[0] = this.meunList[this.meunList.length - 1]
									//最后赋值
									this.videoList = arr
									break;
								default:
									//一条都没有的时候 [1,2,3,4,5,6]
									//直接把meunList末尾的三条放入数组即可
									this.videoList = this.meunList.slice(-3)
									break;
							}
						}
					}
				}
				//考虑向下滑动
				if ((current == 0 && this.current == 2) || (current == 0 && this.current ==
						0)) { //是否滑动到第一条，虽然刚进入页面current为0，但是首次不触发
					//拿出当前的courseDetailsId
					let courseDetailsId = this.videoList[2].courseDetailsId
					indexs = this.meunList.findIndex(item => item.courseDetailsId === courseDetailsId);
					//记录当前数据在meunList中的下标
					if (indexs != -1) { //找到了，indexs就是对应下标
						//先判断meunList数组剩下的元素是否够三条
						const lengths = (this.meunList.slice(indexs + 1, this.meunList.length)).length
						if (lengths >= 3) { //够三条
							// 因为轮播图开启了首尾衔接,所以在滑动到尾部重新进入第一页之前替换全部数据为之后的三条
							this.videoList = this.meunList.slice(indexs + 1, indexs + 4)
						} else { //不够三条
							let arr = new Array(3)
							switch (lengths) {
								//只有一条
								case 1:
									//只有一条的时候需要给数组补两条凑够三条，把meunList数组的前两条拿出来补在后面
									arr[0] = this.meunList[indexs + 1]
									arr[1] = this.meunList[0]
									arr[2] = this.meunList[1]
									this.videoList = arr
									break;
								case 2:
									//只有二条
									arr[0] = this.meunList[indexs + 1]
									arr[1] = this.meunList[indexs + 2]
									arr[2] = this.meunList[0]
									this.videoList = arr
									break;
								default:
									//刚好没有数据了 直接拿meunList的前三条数据
									this.videoList = this.meunList.slice(0, 3)
									break;
							}
						}
					}
				}
				// this.courseId = this.videoList[current].courseId
				// this.courseDetailsId = this.videoList[current].courseDetailsId
				//获取当前播放的视频在菜单数组中的位置
				let scrollIndex = this.meunList.findIndex(ite => ite.courseDetailsId == this.videoList[current]
					.courseDetailsId)
				//记录当前播放位置
				this.scrollIntoView = 'video' + scrollIndex
				//设置轮播图索引
				this.current = current
				if (!this.videoList[this.current].videoUrl) {
					this.zongPrice = this.info.price
					this.countPrice = this.videoList[this.current].price
					this.showPay = true
				}
				this.$nextTick(() => {
					//插入历史记录
					this.setHistor(this.videoList[this.current].courseId, this.videoList[this.current]
						.courseDetailsId)
					this.setWxUrl()
					// #ifndef MP-TOUTIAO
					// 把选择的视频的自动播放设置为true
					this.videoList[this.current].autoPlay = true
					//让当前选择的视频播放
					this.startPlay(this.current)
					// #endif

					//更新视图
					this.$forceUpdate()
				})
			},
			startPlay(current) {
				if (this.videoContext) { //判断之前是否有视频的上下文
					this.videoContext.stop()
					this.videoContext = null
				}
				let numIdCurr = this.videoList[current].courseDetailsId
				if (this.videoList[current].videoUrl) { //已经购买可直接播放
					// 播放时记录当前播放的id
					this.videoList[current].autoPlay = true
					this.videoContextId = 'myVideo' + numIdCurr
					this.videoContext = uni.createVideoContext(this.videoContextId, this)
					if (this.videoContext) {
						this.$nextTick(() => {
							//播放当前的
							this.videoContext.play()
							this.active()
							this.$forceUpdate()
							this.setWxUrl()
						})
					}
				} else { //没有视频链接则表示没有权限，需要购买 弹出购买弹窗
					this.zongPrice = this.info.price
					this.countPrice = this.videoList[this.current].price
					this.showPay = true
				}
			},
			//播放时的回掉
			videoPlay(videoId) {
				this.pauseShow = false

			},
			//监听视频播放完成
			ended() {
				if (this.interVal) {
					clearInterval(this.interVal)
					this.djsNum = 5
				}
				if (this.current == 2) {
					this.current = 0
				} else {
					//拿出当前的courseDetailsId
					let courseDetailsId = this.videoList[this.current].courseDetailsId;
					//拿出当前播放视频的courseDetailsId对应meunList的下标
					let indexs = this.meunList.findIndex(item => item.courseDetailsId === courseDetailsId);
					if (indexs < (this.meunList.length - 1)) { //判断是否是最后一个，如果不是则继续翻下一页
						this.current += 1
						/* console.log('222视频播放完成',this.current)
						this.showPlay = true
						this.interVal = setInterval(() => {
							this.djsNum--
							if (this.djsNum <= 0) {
								this.xyjClick()
								clearInterval(this.interVal)
							}
						}, 1000) */
					}
				}
			},
			cxClick() {
				clearInterval(this.interVal)
				this.djsNum = 5
				this.startPlay(this.current)
				this.showPlay = false
			},
			xyjClick() {
				clearInterval(this.interVal)
				this.djsNum = 5
				this.current += 1
				this.showPlay = false
			},
			//返回
			goBack() {
				let pages = getCurrentPages(); // 获取当前页面栈
				if (pages.length > 1) { // 如果页面栈长度大于1，则表示有上一页 则直接返回
					uni.navigateBack()
				} else { //否则跳转到首页
					uni.switchTab({
						url: '/pages/index/index'
					})
				}
			},
		},
	}
</script>

<style lang="scss">
	page {
		background-color: #000;
	}

	.zd-play {
		/deep/.u-mode-center-box {
			background-color: transparent !important;
		}

		.zd-view {
			width: 100%;

			.cx-btn {
				width: 184rpx;
				height: 72rpx;
				border-radius: 12rpx;
				background-color: #3E3E3E;
				text-align: center;
				line-height: 72rpx;
			}

			.new-btn {
				width: 210rpx;
				height: 72rpx;
				background: #FFFFFF;
				border-radius: 12rpx;
				text-align: center;
				line-height: 72rpx;
				color: #8B8FF0;
				margin-left: 40rpx;
			}

			.djs-num {
				color: #8B8FF0;
			}
		}
	}

	.videoListCurr {
		background: rgba(191, 194, 255, 0.25) !important;
		color: #8B8FF0 !important;
	}

	/deep/.u-drawer-bottom {
		background-color: #ffffff !important;
	}

	.bs {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx;

	}

	.bs-title {
		font-size: 30rpx;
		font-weight: bold;
	}

	.bs-se {
		display: flex;
		align-items: center;
		background-color: #eeeeef;
		padding: 10rpx 20rpx;
		border-radius: 10rpx;
	}

	.bs-se-i {
		width: 100rpx;
		padding: 16rpx 0;
		text-align: center;
	}

	.bsActive {
		background-color: #ffffff;
		border-radius: 6rpx;
	}

	.list {
		.bs {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx;

		}

		.bs-title {
			font-size: 30rpx;
			font-weight: bold;
		}

		.bs-se {
			display: flex;
			align-items: center;
			background-color: #eeeeef;
			padding: 10rpx 20rpx;
			border-radius: 10rpx;
		}

		.bs-se-i {
			width: 100rpx;
			padding: 16rpx 0;
			text-align: center;
		}

		.bsActive {
			background-color: #ffffff;
			border-radius: 6rpx;
		}

		width: 100%;
		height: 100%;
		background-color: #ffffff;
		color: #333333;
		margin: 0 0 40rpx 0;

		.list-title {
			height: 150rpx;
			width: 100%;
			color: #333333;
			font-size: 32rpx;
			font-weight: 500;
			padding-left: 30rpx;

			.list-title-ji {
				color: #999999;
				font-size: 24rpx;
				font-weight: 400;
				margin-left: 20rpx;
			}


		}

		.list-item {
			padding: 0 30rpx;

			.list-item-box {
				width: 100%;
				line-height: 90rpx;
				background-color: #F2F2F2;
				color: #333333;
				font-weight: bold;
				text-align: center;
				margin-bottom: 40rpx;
				border-radius: 20rpx;

				image {
					width: 40rpx;
					height: 40rpx;
					margin-right: 10rpx;
				}
			}

		}

		.list-box {
			width: 100%;
			height: calc(100% - 150rpx);

			.select-js {
				width: calc(100% - 60rpx);
				margin: 0 auto;
				height: 80rpx;

				view {
					width: 120rpx;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
				}

				.js-active {
					color: #8B8FF0;
				}
			}
		}

		.list-box-wai {
			width: calc(100% - 60rpx);
			margin: 0 auto;
		}

		.list-box-item {
			width: 120rpx;
			height: 120rpx;
			background-color: #F6F6F6;
			border-radius: 12rpx;
			margin-bottom: 24rpx;
			position: relative;
		}

		.no-item {
			width: 120rpx;
		}

		.list-box-item-playing {
			position: absolute;
			width: 8rpx;
			height: 8rpx;
			top: 16rpx;
			right: 16rpx;
		}

		.list-box-item-lock {
			background-color: #8B8B8B;

			image {
				width: 52rpx;
				height: 50rpx;
			}
		}

	}

	.swipers {
		width: 100%;

		.swipers-item {
			width: 100%;
			height: 100%;
		}

		.swipers-items {
			width: 100%;
			height: 100%;
			position: relative;
			background-color: #000;
		}

		.swipers-items-imgsbg {
			position: absolute;
			width: 100%;
			height: 90%;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

		.swipers-items-video {
			width: 100%;
			height: 100%;
		}

		.swipers-items-back {
			position: absolute;
			// top: 75rpx;
			left: 20rpx;
			z-index: 999;
		}

		.play-view {
			opacity: 0;
			transition-property: opacity;
			transition-duration: 0.3s;
			transition-timing-function: ease;
			transition-delay: 0s;
		}

		.active-play {
			opacity: 1;
		}

		.play-img {
			width: 64rpx;
			height: 64rpx;
		}

		.swipers-items-info {
			width: 100%;
			height: auto;
			position: absolute;
			bottom: 138rpx;
			bottom: calc(138rpx + constant(safe-area-inset-bottom));
			bottom: calc(138rpx + env(safe-area-inset-bottom));
			left: 0;
			color: #ffffff;
			font-size: 30rpx;
			z-index: 998;
			padding: 0 32rpx;

			.swipers-items-info-content {
				margin-top: 10rpx;
				font-size: 26rpx;
				width: 476rpx;
			}

			.progress-all {
				width: 100%;
				height: 30rpx;
				margin-top: 22rpx;
			}

			.progress-border {
				width: 100%;
				height: 6rpx;
				background-color: rgba(255, 255, 255, 0.1);
				border-radius: 20rpx;
			}

			.progress-active {
				width: 100rpx;
				height: 6rpx;
				background: #F27822;
				border-radius: 20rpx;
			}

			.progress-btn {
				width: 6rpx;
				height: 10rpx;
				background-color: #FFFFFF;
				border-radius: 2rpx;
				top: 50%;
				transform: translateY(-50%);
				left: 0rpx;
				position: absolute;
			}


		}

		.js-view {
			width: 100%;
			background-color: #010101;
			padding: 32rpx;
			/* 	padding-bottom: calc(32rpx + constant(safe-area-inset-bottom));
			padding-bottom: calc(32rpx + env(safe-area-inset-bottom)); */

			.swipers-items-info-num {
				width: 598rpx;
				height: 78rpx;
				background-color: #252525;
			}

			.js-img {
				width: 56rpx;
				height: 56rpx;
			}
		}


		.swipers-items-right {
			width: 72rpx;
			position: absolute;
			right: 32rpx;
			bottom: 200rpx;
			bottom: calc(200rpx + constant(safe-area-inset-bottom));
			bottom: calc(200rpx + env(safe-area-inset-bottom));
			z-index: 999;

			.swipers-items-right-item {
				width: 100%;
				margin-bottom: 32rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
			}

			.swipers-items-right-item-img {
				image {
					width: 60rpx;
					height: 60rpx;
				}
			}

			.swipers-items-right-item-txt {
				font-size: 24rpx;
				color: #ffffff;
				font-weight: bold;
				margin-top: 4rpx;
			}
		}
	}
</style>